<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>emp</title>
  <style>
    /*找到html标签、body标签，和挂载的标签 都给他们统一设置样式*/
    html, body, #app {
      /*设置内部填充为0，几个布局元素之间没有间距*/
      padding: 0;
      /*外部间距也是如此设置*/
      margin: 0;
      /*统一设置高度为100%*/
      height: 100%;
    }
  </style>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
  <link rel="stylesheet" href="css/el/index.css">
  <script src="js/el/index.js"></script>
  <script type="text/javascript" src="js/axios/index.js"></script>
  <script type="text/javascript" src="api/ajax.js"></script>
  <script src="js/marked/marked.js"></script>

</head>
<body>
<div id="app" style="margin: 5px">
  <el-form v-model="empQueryForm" inline size="mini" style="text-align: left;">
    <el-form-item label="姓名">
      <el-input v-model="empQueryForm.ename"></el-input>
    </el-form-item>
    <el-form-item label="工作">
      <el-input v-model="empQueryForm.job"></el-input>
    </el-form-item>
    <el-form-item label="部门编号">
      <el-input v-model="empQueryForm.deptno"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="getEmpListByPage" type="primary" >查询</el-button>
    </el-form-item>
    <el-form-item style="float: right">
      <el-button @click="removeBatch" type="danger" >批量删除</el-button>
    </el-form-item>
    <el-form-item style="float: right">
      <el-button @click="showAddEmpDialogHandler" type="primary" >新增</el-button>
    </el-form-item>
  </el-form>
  <el-dialog :visible.sync="showEmpDialog" v-if="showEmpDialog" fullscreen :modal="false">
    <el-form :model="emp" label-width="130px" size="mini">
      <el-form-item label="姓名">
        <el-input v-model="emp.ename"></el-input>
      </el-form-item>
      <el-form-item label="工作">
        <el-input v-model="emp.job"></el-input>
      </el-form-item>
      <el-form-item label="领导编号">
        <el-input v-model="emp.mgr"></el-input>
      </el-form-item>
      <el-form-item label="入职日期">
        <el-date-picker v-model="emp.hiredate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" style="display: inline"></el-date-picker>
      </el-form-item>
      <el-form-item label="工资">
        <el-input v-model="emp.sal"></el-input>
      </el-form-item>
      <el-form-item label="提成">
        <el-input v-model="emp.comm"></el-input>
      </el-form-item>
      <el-form-item label="部门编号">
        <el-input v-model="emp.deptno"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showEmpDialog = false">取消</el-button>
      <el-button @click="empDialogConfirm()">确定</el-button>
    </div>
  </el-dialog>
  <el-table :data="empList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="empno" label="员工编号"></el-table-column>
    <el-table-column prop="ename" label="姓名"></el-table-column>
    <el-table-column prop="job" label="工作"></el-table-column>
    <el-table-column prop="mgr" label="领导编号"></el-table-column>
    <el-table-column prop="hiredate" label="入职日期" width="170"></el-table-column>
    <el-table-column prop="sal" label="工资"></el-table-column>
    <el-table-column prop="comm" label="提成"></el-table-column>
    <el-table-column prop="deptno" label="部门编号"></el-table-column>
    <el-table-column prop="delete" label=""></el-table-column>
    <el-table-column label="操作" width="150">
      <template slot-scope="scope">
        <el-button class="el-icon-edit-outline" @click="showUpdateEmpDialogHandler(scope.$index, scope.row)" type="primary" size="mini"></el-button>
        <el-button class="el-icon-delete-solid" @click="deleteEmp(scope.$index, scope.row)" type="danger" size="mini"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
      layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage"
      :page-sizes="[10,15,30,50]" :page-size="pageSize" :total="total">
  </el-pagination>
</div>

</body>
</html>
<script>
  new Vue({
    el: '#app',
    name: "Emp",
    data: function () {
      return {
        showEmpDialog: false,
        empQueryForm: {},
        operationType: "",
        empList: [],
        multipleSelection:[],
        // 新增(新增前需要清空emp),编辑(需要将当前行赋值给emp),查询(与查询条件双向绑定)共用
        emp: {},
        total: 0,
        currentPage: 1,
        pageSize: 10,
        sortInfo: null,
      }
    },
    methods: {
      showUpdateEmpDialogHandler(index, row) {
        this.operationType = "update";
        this.emp = row;
        this.showEmpDialog = true;
      },
      showAddEmpDialogHandler() {
        this.operationType = "add";
        this.emp = {};
        this.showEmpDialog = true;
      },
      empDialogConfirm() {
        if (this.operationType === "add") {
          this.addEmp()
        }
        if (this.operationType === "update") {
          this.updateEmp()
        }
        this.showEmpDialog = false;
      },
      async deleteEmp(index, row) {
        this.$confirm('确定要删除?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
          let url = `emp/emp/` + row.empno;
          ajax(url,null,'delete').then((res) => {
            if (res.success) {
              this.getEmpListByPage();
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'});
        });
      },
      addEmp() {
        let url = `emp/emp`;
        ajax(url, this.emp, "POST").then(res => {
          if (res.success) {
            this.getEmpListByPage();
          }
        })
      },
      async updateEmp() {
        let url = `emp/emp`;
        let res = await ajax(url, this.emp, "put");
        if (res.success) {
          this.getEmpListByPage();
        }
      },
      // pageSize变动,触发重新从后台加载数据
      sizeChangeHandle(pageSize) {
        this.pageSize = pageSize;
        this.getEmpListByPage();
      },
      // currentPage变动,触发从后台加载数据
      currentChangeHandle(currentPage) {
        this.currentPage = currentPage;
        this.getEmpListByPage();
      },
      async getEmpListByPage() {
        let url = `emp/getEmpListByPage`;
        // 组装分页与排序
        this.empQueryForm.currentPage = this.currentPage;
        this.empQueryForm.pageSize = this.pageSize;
        this.empQueryForm.sortInfo = this.sortInfo;
        let res = await ajax(url, this.empQueryForm, 'POST');
        if (res.success) {
          this.empList = res.data.records;
          // this.empList = res.data.list;
          this.total = res.data.total;
        }
      },
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      removeBatch(){
        if (this.multipleSelection == null || this.multipleSelection.length === 0) {
          return;
        }
        this.$confirm('确定要删除?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
          let url = "emp/removeBatch";
          let empnos = this.multipleSelection.map(item=>item.empno);
          ajax(url, empnos, "POST").then(res => {
            if (res.success) {
              this.getEmpListByPage();
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'});
        });
      }
    },
    mounted() {
      this.getEmpListByPage()
    }

  })
</script>
